<template>
    <svg ref="experLattice" class="exper-lattice" xmlns="http://www.w3.org/2000/svg"
         viewBox="0 0 750 20"></svg>
</template>

<style lang="scss" scoped>

</style>

<script>
    export default {
        name: "svg-lattice-ui",
        props: {},
        methods: {
            anime(){

                let dom = this.$refs.experLattice;
                let lin = dom.querySelectorAll('.line');

                anime({
                    targets: lin,
                    fill: {
                        // value: ['#020732', '#005a73'],
                        value: '#005a73',
                        duration: 700,
                        easing: 'easeInOutQuart'
                    },
                    // stroke: {
                    //     value: ['#3b5998', '#4099ff'],
                    //     duration: 700,
                    //     delay: 200,
                    //     easing: 'easeInOutQuart'
                    // },
                    easing: 'linear',
                    duration: this.animeTime,
                    direction: 'alternate',
                    delay: function (el, i, l) {
                        return i * 200;
                    },
                    loop: true,
                })
            }
        },
        mounted(){

            let dom = this.$refs.experLattice;
            let w = 25;
            for (let i = 0; i < 750; i += w + 0.1) {
                let rectObj = document.createElementNS("http://www.w3.org/2000/svg", "rect");
                rectObj.setAttribute("class", 'line');
                rectObj.setAttribute("x", i);
                rectObj.setAttribute("y", 0);
                rectObj.setAttribute("width", w);
                rectObj.setAttribute("height", 20);
                dom.appendChild(rectObj);
            }

            this.$nextTick(() => {
                this.anime();
            })
        }
    }
</script>